<template>
  <div>
    <!-- 增加查询重置组件 -->
    <!-- inline="true" 表单一行显示 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      class="demo-form-inline"
      style="margin-left:60px"
    >
      <el-form-item prop="cardNum">
        <el-input v-model="searchMap.cardNum" placeholder="会员卡号"></el-input>
      </el-form-item>

      <el-form-item prop="name">
        <el-input v-model="searchMap.name" placeholder="会员名字"></el-input>
      </el-form-item>

      <el-form-item prop="payType">
        <el-select v-model="searchMap.payType" placeholder="支付类型" style="width:110px">
          <!-- payTypeOptions要挂载到组件实例当中 -->
          <!-- 这里的value值实际上就是select 下拉框中的value值 -->
          <el-option
            v-for="item in payTypeOptions"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- value-format 指定绑定值的格式 -->
      <el-form-item prop="birthday">
        <el-date-picker
          v-model="searchMap.birthday"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="会员生日"
        ></el-date-picker>
      </el-form-item>

      <el-form-item style="margin-left:40px">
        <el-button type="primary" @click="fetchData" class="btn">查询</el-button>
        <el-button type="primary" @click="addMember" class="btn">新增</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- type="index" 获取索引值 从1开始 -->
    <!-- 表格组件 -->
    <el-table :data="listData" height="420" border style="width: 100%">
      <el-table-column type="index" label="序号" :width="60"></el-table-column>
      <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item,index) in list" :key="index"></el-table-column>
      <el-table-column prop="patType" label="支付类型" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.payType | payTypeFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="会员地址"></el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="margin-left:60px"
    ></el-pagination>

    <!-- 弹出会员编辑模块 -->
    <el-dialog title="会员编辑" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        :rules="rules"
        :model="pojo"
        ref="form"
        label-width="100px"
        label-position="right"
        style="width:400px"
      >
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model="pojo.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model="pojo.name"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
          <el-date-picker
            v-model="pojo.birthday"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="会员生日"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="pojo.phone"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money">
          <el-input v-model="pojo.money"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="intergral">
          <el-input v-model="pojo.intergral"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-select v-model="pojo.payType" placeholder="支付类型" style="width:100px">
            <!-- payTypeOptions要挂载到组件实例当中 -->
            <el-option
              v-for="item in payTypeOptions"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input type="textarea" v-model="pojo.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :plain="true" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import memberApi from "@/api/member.js";

//支付类型
const payTypeOptions = [
  { type: "1", name: "支付宝" },
  { type: "2", name: "微信" },
  { type: "3", name: "银行卡" },
  { type: "4", name: "现金" }
];

export default {
  data() {
    return {
      listData: [],
      total: 0, //总条数
      currentPage: 1, //当前的页码,
      pageSize: 10,
      searchMap: {
        //条件查询绑定的条件值,
        cardNum: "",
        name: "",
        payType: "",
        birthday: ""
      },
      payTypeOptions,
      // 用来循环遍历列表
      list:[
         {prop:'cardNum',label:'会员卡号',width:160},
        {prop:'name',label:'会员姓名',width:90},
        {prop:'birthday',label:'会员生日',width:120},
        {prop:'phone',label:'手机号码',width:160},
        {prop:'intergral',label:'可用积分',width:90},
        {prop:'money',label:'开卡金额',width:90},
       
      ],
      dialogFormVisible: false,
      pojo: {
        cardNum: "",
        name: "",
        birthday: "",
        phone: "",
        money: null,
        intergral: 0,
        payType: "",
        address: ""
      },
      rules: {
        //校验规则
        cardNum: [{ required: true, message: "卡号不能为空", trigger: "blur" }],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        money: [
          { required: true, message: "开卡金额不能为空", trigger: "blur" }
        ],
        payType: [
          { required: true, message: "支付类型不能为空", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      //调用分页接口查询数据
      memberApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          const resData = response.data;
          this.listData = resData.data.rows;
          this.total = resData.data.total;
          // console.log(resData.data.total);
        });
    },

    //当页面条数更改后触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    //当页码发生变化的时候触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    resetForm(formName) {
      //要想重置必须 必须给组件标签 el-form-item 添加prop属性并且指定字段
      this.$refs[formName].resetFields();
    },
    //点击新增的时候触发
    addMember() {
      console.log("新增", this.pojo);
      // this.pojo={};
      this.dialogFormVisible = true;
      //重置表单
      this.$nextTick(() => {
        //this.next是vue实例中内置的一个异步api ,当表单渲染之后才会被执行 这样就可以解决在表单渲染之前就重置无效的问题
        this.$refs["form"].resetFields();
      });
    },
    //当点击确定按钮时触发该函数
    submit(formName) {
      this.$refs[formName].validate(valid => {
        //验证通过
        if (valid) {
          //如果有ID说明这个一个更新会员信息 提交按钮
          if (this.pojo.id) {
            memberApi.upData(this.pojo).then(response => {
              const updatedResData = response.data;
              //数据更新成功
              if (updatedResData.flag) {
                this.$message({
                  message: updatedResData.message,
                  type: "success"
                });
                this.fetchData();
                this.dialogFormVisible = false;
                //数据更新失败
              } else {
                this.$message.error(updatedResData.message);
                this.fetchData();
                this.dialogFormVisible = true;
              }
            });
            // 删除pojo中ID字段
            delete this.pojo.id;
            //没有ID 说明这是一个新增会员信息 提交按钮
          } else {
            memberApi.add(this.pojo).then(response => {
              if (response.data.flag) {
                //如果会员信息添加成功
                const successMsg = response.data.message;
                this.$message({
                  message: successMsg,
                  type: "success"
                });
                this.fetchData();
                //让弹出的增加会员页面退出
                this.dialogFormVisible = false;
              } else {
                //如果用户信息添加失败
                const errorMsg = response.data.message;
                this.$message.error(errorMsg);
                //让弹出的增加会员页面继续保留

                this.dialogFormVisible = true;
              }
            });
          }
        } else {
          //验证失败
          return false;
        }
      });
    },
    handleEdit(id) {
      //修改用户信息

      this.dialogFormVisible = true;
      this.addMember(); //弹出对话框

      memberApi.getById(id).then(response => {
        if (response.data.message) {
          //如果会员信息查询成功
          const getMemberData = response.data.data;
          this.pojo = getMemberData;
          console.log(getMemberData);
        } else {
          return false;
        }
      });
    },
    handleDelete(id) {
      //删除用户信息
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          memberApi.delData(id).then(response => {
            const delMessage = response.data.message;
            if (response.data.flag) {
              //如果删除成功
              this.$message({
                message: delMessage,
                type: "success"
              });
              this.fetchData();
            } else {
              //如果删除失败
              this.$message({
                showClose: true,
                message: delMessage,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  filters: {
    payTypeFilter(type) {
      //过滤出满足条件的payTypeOptions元素
      // 注意 :过滤器中不能使用实例中的this
      const payObj = payTypeOptions.find(item => item.type === type);
      return payObj ? payObj.name : null;
    }
  }
};
</script>

<style scoped>
.btn {
  margin-left: 10px;
}
</style>